<template>
  <div class="box">
    <div class="left">
      <span class="tab purple-border">网页设置</span>
      <div class="group">
        <div class="item" @click="popDialog(1)">
          <span class="title">个人信息</span>
          <i class="icon icon-yonghu blue-icon"></i>
          <span class="info">更改头像，更新个人信息</span>
        </div>
        <div class="item" @click="clickQuitLogin">
          <span class="title">退出登录</span>
          <i class="icon icon-tuichudenglu2 purple-icon"></i>
          <span class="info">返回登录页面，重新登录</span>
        </div>
        <div class="item" @click="clickLogout">
          <span class="title">注销账户</span>
          <i class="icon icon-shanchu2 red-icon"></i>
          <span class="info">注销当前账户</span>
        </div>
        <div class="item" @click="popDialog(9)">
          <span class="title">修改密码</span>
          <i class="icon icon-mima4 green-icon"></i>
          <span class="info">修改账户密码</span>
        </div>
      </div>
    </div>
    <!-- <div class="right"></div> -->
    <changeInfoDialog></changeInfoDialog>

    <passwordDialog></passwordDialog>
  </div>
</template>

<script>
import service from "@/utils/request";

import changeInfoDialog from "dialog/changeInfoDialog.vue";

import passwordDialog from "@/components/dialog/passwordDialog.vue";
export default {
  components: {
    changeInfoDialog,
    passwordDialog,
  },
  data() {
    return {
      userInfo: {},
      isOpen: false,
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("user"));
  },
  methods: {
    popDialog(index) {
      this.$bus.$emit("openDialog", index);
    },
    //退出登录处理逻辑
    clickQuitLogin() {
      this.$confirm("你正在退出登录，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        localStorage.removeItem("user");
        localStorage.removeItem("token");
        this.userInfo = {};
        this.$bus.$emit("updateUserInfo", this.userInfo);
        this.$router.replace({ path: "/home" });
      });
    },

    //注销账户处理逻辑
    clickLogout() {
      this.$confirm(
        "你正在注销账号，注销后不可登录与找回，是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        service
          .get(`/user/delete/${this.userInfo.userId}`)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.myNotify("success", "注销成功！");
              localStorage.removeItem("user");
              localStorage.removeItem("token");
              this.userInfo = {};
              this.$bus.$emit("updateUserInfo", this.userInfo);
              this.$router.replace({ path: "/home" });
            } else {
              this.myNotify("warning", "注销失败！", res.message);
            }
          })
          .catch((error) => {
            this.myNotify(
              "error",
              "系统错误！",
              `服务器开小差了，请稍后再试~~~`
            );
            console.error("系统错误:", error);
          });
      });
    },
    //封装一下提示信息
    myNotify(type, title, message) {
      this.$notify({
        title: title,
        message: message,
        offset: 100,
        type: type,
        duration: 3000,
      });
    },
  },
};
</script>

<style lang="less" scoped>
@icon-height: 3.5rem;
@item-hight: 11.5rem;
@num-20: 1rem;
@num-10: 0.5rem;
@num-4: 0.4rem;

.box {
  width: 100%;
  height: 100%;
  font-size: 1.2rem;
  display: flex;
  flex-direction: row;

  .left {
    width: 62%;

    .tab {
      margin-top: @num-10;
      display: flex;
      align-content: center;
      height: @num-20;
      padding: 0 @num-10;
      line-height: @num-20;
      font-size: @num-20;
    }

    .group {
      height: 10.5rem;
      width: 100%;
      margin-top: @num-20;
      font-size: 1.4rem;
      display: flex;
      margin-bottom: 3rem;
      gap: 40px;

      .item {
        width: @item-hight;
        height: @item-hight;
        display: flex;
        border-radius: @num-10;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        background: #f5f2f2;
        position: relative;

        .info {
          display: block;
          width: 80%;
          text-align: center;
          font-size: 0.8rem;
          letter-spacing: 0.1rem;
          top: 8.5rem;
          position: absolute;
        }

        .title {
          font-size: 1rem;
          letter-spacing: 0.1rem;
          font-weight: 700;
        }

        i {
          border-radius: @num-10;
          color: white;
          text-align: center;
          line-height: @icon-height;
          width: @icon-height;
          height: @icon-height;
          font-size: 2rem;
          margin-bottom: @num-10;
          margin-top: @num-10;
          /* 图标颜色 */
        }

        &:hover {
          box-shadow: 5px 5px @num-20 #bebebe, -@num-10 -@num-10 @num-10 #ffffff;
          /* 悬停效果，内阴影 */
        }
      }
    }
  }

  .right {
    width: 36%;
    margin-top: 2.2rem;
    margin-left: 1rem;
    background-image: url("../../../static/imgs/111.jpg");
    background-size: 120%;
    background-repeat: no-repeat;
    opacity: 0.8;
    background-position: -3rem -6rem;
  }

  .purple-icon {
    background-color: purple;
  }

  .red-icon {
    background-color: red;
  }

  .green-icon {
    background-color: green;
  }
  .blue-icon {
    background-color: skyblue;
  }

  .purple-border {
    border-left: @num-4 solid purple;
  }

  .red-border {
    border-left: @num-4 solid red;
  }

  .green-border {
    border-left: @num-4 solid green;
  }
}
</style>
